<template>
  <view class="map-contain">
    <!-- 地图组件 -->
    <map id="myMap" class="map-view" :latitude="latitude" :longitude="longitude" :scale="scale" :markers="markers"
      :show-location="showLocation" :circles="circles" :polyline="polyline"></map>
  </view>
</template>

<script setup>
// 采用 Vue3 组合式 API 改写，保持原有功能
import { ref, onMounted } from 'vue'
import { onLoad, onShow, onHide } from '@dcloudio/uni-app'
import { netConfig } from '@/api/net.config'

// 地图相关
const latitude = ref(39.90923) // 纬度（默认北京）
const currentLatitude = ref(39.90923) // 当前纬度
const longitude = ref(116.397428) // 经度
const currentLongitude = ref(116.397428) // 当前经度
const start = ref('') // 起点经纬度字符串
const polyline = ref([])  // 路径线
const scale = ref(16) // 缩放级别
const showLocation = ref(true) // 是否显示当前定位
const markers = ref([]) // 标记点数组
const circles = ref([]) // 圆圈数组

// 搜索相关
const searchKeyword = ref('') // 搜索关键词
const searchResults = ref([]) // 搜索结果
const showResult = ref(false) // 是否显示搜索结果

// 输入防抖定时器（无需响应式）
let timer = null

// 高德 REST Key（地理编码/路线等 REST 能力）
const amapRestKey = netConfig.amapKey

// 获取当前位置
const getCurrentLocation = () => {
  uni.getLocation({
    type: 'gcj02', // 返回国测局坐标，兼容高德地图
    success: (res) => {
      latitude.value = res.latitude
      currentLatitude.value = res.latitude
      longitude.value = res.longitude
      currentLongitude.value = res.longitude

      start.value = res.longitude + ',' + res.latitude

      // 添加当前位置标记
      markers.value = [
        {
          id: 0,
          latitude: res.latitude,
          longitude: res.longitude,
          title: '我的位置',
          iconPath: '/static/images/home/position.png',
          width: 30,
          height: 30,
          callout: {
            content: '起点',
            display: 'ALWAYS',
          },
        },
      ]
      circles.value = [
        {
          // 在地图上显示圆
          latitude: latitude.value,
          longitude: longitude.value,
          fillColor: '#3BBAFD29', // 填充颜色（透明度）
          color: '#3BBAFD', // 描边的颜色
          radius: 20, // 半径
          strokeWidth: 2, // 描边的宽度
        },
        {
          // 在地图上显示圆
          latitude: 36.647,
          longitude: 114.55,
          fillColor: '#3BBAFD29', // 填充颜色
          color: '#3BBAFD', // 描边的颜色
          radius: 20, // 半径
          strokeWidth: 2, // 描边的宽度
        },
      ]
    },
    fail: (err) => {
      console.error('定位失败', err)
      uni.showToast({
        title: '获取位置失败',
        icon: 'none',
      })
    },
  })
}

// 处理输入（防抖）
const handleInput = () => {
  if (timer) {
    clearTimeout(timer)
    timer = null
  }

  // 输入为空时清空结果
  if (!searchKeyword.value) {
    searchResults.value = []
    showResult.value = false
    return
  }

  // 300ms 防抖
  timer = setTimeout(() => {
    searchLocation()
  }, 300)
}

// 搜索位置
const searchLocation = () => {
  if (!searchKeyword.value.trim()) {
    return
  }

  // 显示加载提示
  uni.showLoading({
    title: '搜索中...',
  })

  // 使用高德地图地理编码 API
  const url = `https://restapi.amap.com/v3/geocode/geo`
  const key = amapRestKey
  uni.request({
    url: url,
    method: 'GET',
    data: {
      address: searchKeyword.value,
      key,
    },
    success: (res) => {
      uni.hideLoading()
      if (res.data.status === '1' && res.data.geocodes.length > 0) {
        searchResults.value = res.data.geocodes.map((poi) => ({
          name: poi.name,
          address:
            poi.formatted_address || poi.province + poi.city + poi.district,
          latitude: parseFloat(poi.location.split(',')[1]),
          longitude: parseFloat(poi.location.split(',')[0]),
          endtext: poi.location,
          id: poi.id,
        }))
        showResult.value = true
      } else {
        searchResults.value = []
        showResult.value = true
        uni.showToast({
          title: '未找到相关地点',
          icon: 'none',
        })
      }
    },
    fail: (err) => {
      uni.hideLoading()
      console.error('搜索失败', err)
      uni.showToast({
        title: '搜索失败，请重试',
        icon: 'none',
      })
    },
  })
}

// 选择搜索结果中的位置
const selectLocation = (item) => {
  // 隐藏搜索结果
  showResult.value = false

  // 移动地图到选中位置
  latitude.value = item.latitude
  longitude.value = item.longitude

  // 更新标记点，保留“我的位置”标记
  markers.value = [
    ...markers.value.filter((marker) => marker.id === 0),
    {
      id: item.id,
      latitude: item.latitude,
      longitude: item.longitude,
      title: item.address,
      iconPath: '/static/icons/marker.png',
      width: 30,
      height: 30,
      callout: {
        content: '终点',
        display: 'ALWAYS',
      },
    },
  ]


  // 显示选中提示
  uni.showToast({
    title: `已选择: ${item.address}`,
    icon: 'none',
  })

  const origin = start.value
  const destination = item.endtext
  const key = amapRestKey
  const url = `https://restapi.amap.com/v3/direction/driving?origin=${origin}&destination=${destination}&key=${key}`

  uni.request({
    url,
    success: (res) => {
      const data = res.data.route
      if (data.paths?.[0]?.steps) {
        washData(data.paths[0].steps)
      }
    },
  })
}

const washData = (steps) => {
  const points = []
  steps.forEach((item) => {
    const polen = item.polyline.split(';')
    polen.forEach((vv) => {
      const splits = vv.split(',')
      points.push({
        longitude: parseFloat(splits[0]),
        latitude: parseFloat(splits[1]),
      })
    })
  })

  polyline.value = [
    {
      points: points,
      width: 8,
      arrowLine: true,
      arrowIconPath: true,
      color: '#204CF1',
    },
  ]
}

// 清空搜索
const clearSearch = () => {
  searchKeyword.value = ''
  searchResults.value = []
  showResult.value = false
}

// 页面生命周期
onLoad(() => {
  // 初始化定位
  getCurrentLocation()
})
onShow(() => {
  // 返回页面时刷新定位
  getCurrentLocation()
})
onHide(() => {
  // 隐藏页面时清理搜索与定时器
  clearSearch()
  if (timer) {
    clearTimeout(timer)
    timer = null
  }
})
</script>

<style scoped>
.map-contain {
  width: 100%;
  height: 100%
}

/* 地图样式 */
.map-view {
 width: 100%;
  height: 100%

}
</style>
